<template>
  <div class="wrapper">
    <el-form :inline="true">
      <el-form-item>
        <el-dropdown @command="setState">
          <span class="el-dropdown-link">
            {{stateStr}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{value: '', title: '全部入住状态' }">全部入住状态</el-dropdown-item>
            <el-dropdown-item :command="{value: '0', title: '待入住' }">待入住</el-dropdown-item>
            <el-dropdown-item :command="{value: '1', title: '入住中' }">入住中</el-dropdown-item>
            <el-dropdown-item :command="{value: '2', title: '待打扫' }">待打扫</el-dropdown-item>
            <el-dropdown-item :command="{value: '3', title: '待账单确认' }">待账单确认</el-dropdown-item>
            <el-dropdown-item :command="{value: '4', title: '退房' }">退房</el-dropdown-item>
            <el-dropdown-item :command="{value: '5', title: '申请退房' }">申请退房</el-dropdown-item>
            <el-dropdown-item :command="{value: '6', title: '押金已付' }">押金已付</el-dropdown-item>
            <el-dropdown-item :command="{value: '7', title: '已取消' }">已取消</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-dropdown @command="setTime">
          <span class="el-dropdown-link">
            {{timeStr}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{value: '', title: '时间类型' }">时间类型</el-dropdown-item>
            <el-dropdown-item :command="{value: '1', title: '入住时间' }">入住时间</el-dropdown-item>
            <el-dropdown-item :command="{value: '2', title: '离店时间' }">离店时间</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="startEndTime"
          :disabled="isDisable"
          @change="_reset"
          size="small"
          style="height:34px;width:230px"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入订单号/入住号/入住人/推荐人" style="width:300px"
        clearable
          v-model="search"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
          size="small"
          style="width:60px"
          @click="_reset">
          <i class="el-icon-search"></i>
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-table :data="orderList" max-height="550">
          <el-table-column label="订单编号" prop="orderNum"></el-table-column>
          <el-table-column label="房型"  prop="room"></el-table-column>
          <el-table-column label="房价"  prop="roomMoney"></el-table-column>
          <el-table-column label="入离时间"  >
             <template slot-scope="scope">
              <p v-for="(item,index) in scope.row.time.split('/')" :key="index"> {{item}}{{index==0?'(入)': '(离)'}}</p>
            </template>
          </el-table-column>
          <el-table-column label="房号"  prop="roomNum "></el-table-column>
          <el-table-column label="入住人"  prop="person"></el-table-column>
          <el-table-column label="状态"  prop="stateCN"></el-table-column>
          <el-table-column label="推荐人"  prop="referrer"></el-table-column>
          <el-table-column label="订单时间"  prop="orderTime"></el-table-column>
          <el-table-column label="操作"  prop="">
            <template slot-scope="scope">
              <el-button type="text" @click="_detail(scope.row.checkId)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item class="fr">
        <el-pagination @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, prev , pager , next, sizes"
          :total="total"
          style="margin-top:20px">
        </el-pagination>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { invoiceOrderList } from "@/public/js/performance.js";
export default {
  components: {},
  props: {},
  data() {
    return {
      total: 0,
      pageNum: 1,
      pageSize: 10,
      stateStr: "全部入住状态",
      timeStr: "时间类型",
      search: "",
      state: "",
      time: "",
      orderList:[],
      isDisable: true,
      startEndTime: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    _reset() {
      this.pageNum = 1;
      this.pageSize = 10;
      this._invoiceOrderList();
    },
    _invoiceOrderList() {
      invoiceOrderList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        search: this.search,
        state: this.state,
        time: this.time,
        startTime: this.startEndTime ? this.startEndTime[0] : "",
        endTime: this.startEndTime ? this.startEndTime[1] : ""
      }).then(res => {
        console.log('res',res);
        this.orderList = res.data.orderList;
        this.total = res.data.total;
      });
    },
    // 入住状态
    setState(state) {
      this.state = state.value;
      this.stateStr = state.title;
      this._reset();
    },
    // 时间类型
    setTime(time) {
      this.time = time.value;
      this.timeStr = time.title;
      if (this.time) {
        this.isDisable = false;
      } else {
        this.isDisable = true;
      }
    },
    //查看详情
    _detail(id){
      sessionStorage.setItem('_activeName','third');
      this.$router.push({
        path:`checkIn-detail?id=${id}`
      })
    },
    //分页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this._invoiceOrderList();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
       this._invoiceOrderList();
    }
  },
  created() {
    this._invoiceOrderList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>